<template>
  <el-dialog
    title="题目预览"
    :visible.sync="dialogForm"
    @close="onClose"
    width="900px"
  >
    <!-- body部分 -->
    <el-row class="bodyUL">
      <!-- 题型 -->
      <el-row type="flex" justify="start" align="center" class="header1">
        <el-col :span="6" v-if="currentData.questionType === '1'"
          >【题型】 : 单选</el-col
        >
        <el-col :span="6" v-else-if="currentData.questionType === '2'"
          >【题型】 : 多选</el-col
        >
        <el-col :span="6" v-else>【题型】 : 简答</el-col>
        <el-col :span="6">【编号】 : {{ currentData.id }}</el-col>
        <el-col :span="6" v-if="currentData.difficulty === '1'"
          >【难度】 : 简单</el-col
        >
        <el-col :span="6" v-else-if="currentData.difficulty === '2'"
          >【难度】 : 一般</el-col
        >
        <el-col :span="6" v-else>【难度】 : 困难</el-col>
        <el-col :span="6">【标签】 : {{ currentData.tags }}</el-col>
        <el-col :span="6">【学科】 : {{ currentData.subjectName }}</el-col>
        <el-col :span="6">【目录】 : {{ currentData.directoryName }}</el-col>
        <el-col :span="6">【方向】 : {{ currentData.direction }}</el-col>
      </el-row>
      <!-- 题干 -->
      <el-row class="header2">
        <el-col>【题干】 :</el-col>
        <el-col style="color: blue; margin: 14px 0">{{
          currentData.question
        }}</el-col>
        <el-col v-if="currentData.questionType === '1'">{{
          "单选题 选项：（以下选中的选项为正确答案）?"
        }}</el-col>
        <el-col v-if="currentData.questionType === '1'">
          <el-form :model="form">
            <el-radio-group v-model="form.resource">
              <el-col class="son" v-for="(item, index) in options" :key="index">
                <el-radio v-if="item.isRight===1" :label="item.isRight">{{item.title}}</el-radio>
                <el-radio v-else :disabled='true'>{{item.title}}</el-radio>
              </el-col>
            </el-radio-group>
          </el-form>
        </el-col>
        <el-col v-else-if="currentData.questionType === '2'">{{
          "多选题 选项：（以下选中的选项为正确答案）?"
        }}</el-col>
        <el-col v-if="currentData.questionType === '2'">
          <el-form :model="form">
            <el-checkbox-group v-model="form.type">
              <el-col class="son" v-for="(item, index) in options" :key="index">
                <el-checkbox v-if="item.isRight===1" :label="item.isRight" name="type">{{item.title}}</el-checkbox>
                <el-checkbox v-else :disabled='true' name="type">{{item.title}}</el-checkbox>
              </el-col>
            </el-checkbox-group>
          </el-form>
        </el-col>
      </el-row>
      <!-- 参考答案 -->
      <el-row class="header3">
        <el-row type="flex" class="header3-top">
          <span class="right">【参考答案】 : </span>
          <el-button
            style="padding: 9px 15px"
            type="danger"
            size="mini"
            @click="isShow = true"
            >视频答案预览</el-button
          >
        </el-row>
        <el-col v-if="isShow" class="show">
          <video
            class="show"
            autoplay
            controls
            :src="currentData.videoURL"
          ></video>
        </el-col>
      </el-row>
      <!-- 答案解析 -->
      <el-row class="header4">
        <el-col>【答案解析】：{{ currentData.answer }}</el-col>
      </el-row>
      <!-- 【题目备注】： -->
      <el-row class="header5">
        <el-col>【题目备注】：{{ currentData.remarks }}</el-col>
      </el-row>
      <el-button
        type="primary"
        size="medium"
        class="closeCard"
        @click="dialogForm = false"
        >关闭</el-button
      >
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'questionsPreview',
  data () {
    return {
      isShow: false, // 控制视频的显示影藏
      form: {
        resource: 1,
        type: [1]
      },
      dialogForm: false
    }
  },
  computed: {
    options () {
      return this.currentData.options || []
    }
  },
  watch: {
  },
  props: {
    currentData: {
      type: Object,
      required: true
    }
  },
  created () {},
  methods: {
    // 关闭对话框时触发
    onClose () {
      this.isShow = false
    },
    // 打开对话框
    onOpen () {
      this.dialogForm = true
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 800px;
  border-radius: 10px;
}
.wordCard {
  padding: 0 20px;
  background-color: #409eff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.closeX {
  padding: 0;
  border: 0;
  color: #fff;
  background-color: #409eff;
}
.bodyUL {
  color: #606266;
  font-size: 14px;
  padding: 0 20px;
}
.header1 {
  flex-wrap: wrap;
  align-content: space-between;
  border-bottom: 1px solid #606266;
  padding-bottom: 20px;
}
.header2 {
  padding: 7px 0 0;
  /* height: 200px; */
  border-bottom: 1px solid #606266;
}
.header3 {
  padding: 7px 0;
  border-bottom: 1px solid #606266;
}
.header3-top {
  height: 40px;
  line-height: 40px;
}
.show {
  width: 400px;
  height: 300px;
}
.header4 {
  padding: 21px 0;
  border-bottom: 1px solid #606266;
}
.header5 {
  padding: 20px 0;
  /* border-bottom: 1px solid #606266; */
}
.closeCard {
  float: right;
  margin: 10px -20px -10px 20px;
}
.right {
  margin-right: 10px;
}
.son {
  padding: 8px 0;
}
</style>
